<jsp:useBean id="selectSort" scope="request" type="java.lang.Integer"/>
<%--
  Created by IntelliJ IDEA.
  User: kwc13
  Date: 2023-12-21
  Time: 下午 04:03
  To change this template use File | Settings | File Templates.
--%>
<!DOCTYPE html>
<%@ page contentType="text/html;charset=UTF-8" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<%@ page isELIgnored="false" %>
<!-- 设置页面为Chain -->
<html lang="ch">
<head>
    <title>小米商城后台管理</title>
    <!-- 设置地址栏主题背景颜色 -->
    <meta name="theme-color" content="#000000">
    <!-- 页面描述 -->
    <meta name="description" content="页面描述信息">
    <!-- 移动端显示 -->
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <!-- 页面Logo -->
    <link rel="shortcut icon" href="http://localhost:8083/resource_packs/images/logo.png">
    <!-- CSS -->
    <link href="${pageContext.request.contextPath}/other/style/background/orders.css" rel="stylesheet"
          type="text/css"/>
    <!-- JQuery -->
    <script src="${pageContext.request.contextPath}/other/component/jquery.min.js"></script>
    <!-- JS -->
    <script src="${pageContext.request.contextPath}/other/request/background/orders.js"></script>
    <script src="${pageContext.request.contextPath}/other/request/background/gaud.js"></script>
    <script src="${pageContext.request.contextPath}/other/scripts/background/orders.js"></script>
</head>
<body>
<jsp:useBean id="orderPage" scope="request" type="com.xm.entity.Page"/>
<c:set var="currentPage" value="${orderPage.pageNumber}"/>
<c:set var="totalPages" value="${orderPage.totalPages}"/>
<div class="son-body">
    <div class="head">
    <span class="title-context">
        订单管理
    </span>
        <div class="logistics-companies">
            <div class="search">
                <div class="searchi-input">
                    <label>
                        <input type="text" placeholder="请输入订单号/收货人" class="nameOrId">
                    </label>
                </div>
                <div class="search-img">
                    <img src="http://localhost:8083/resource_packs/images/search_%23fff.png" alt="搜索">
                </div>
            </div>
            <button class="logistics-company-management">物流公司</button>
        </div>
    </div>
    <div class="other-function">
        <div class="sift-function"
             current-page="${currentPage}"
             page-size="${orderPage.pageSize}"
             date-sort="${selectSort}">
            <div class="sift">
                <label for="state">状态 :</label>
                <select name="choose-head" id="state">
                    <option value="4">未发货</option>
                    <option value="0">未支付</option>
                </select>
            </div>
            <div class="sift">
                <label>时间 :</label>
                <label>
                    <input name="date" type="radio" value="ASC"
                           class="chronological-ordering" ${selectSort == 1 ? 'checked' : '' }/>
                    <a style="font-weight: 500;">倒叙</a>
                </label>
                <label>
                    <input name="date" type="radio" value="DESC"
                           class="chronological-ordering" ${selectSort == 1 ? '' : 'checked' }/>
                    <a style="font-weight: 500;">正序</a>
                </label>
            </div>
        </div>
        <div class="sift-button">
            <button class="inquire-button">查询</button>
        </div>
    </div>
    <div class="table-body">
        <table>
            <thead>
            <tr>
                <th class="table-title-th">运单号</th>
                <th class="table-title-th">收货人</th>
                <th class="table-title-th">商品件数</th>
                <th class="table-title-th">下单时间</th>
                <th class="table-title-th">总价格</th>
                <th class="table-title-th">支付方式</th>
                <th class="table-title-th">状态</th>
                <th class="operation table-title-th">操作</th>
            </tr>
            </thead>
            <tbody>
            <c:forEach var="order" items="${orderPage.data}">
                <tr>
                    <td class="table-tbody-tr">${order.ordersId}</td>
                    <td class="table-tbody-tr">${order.address.addressName}</td>
                    <td class="table-tbody-tr">${order.totalMerchandise}</td>
                    <td class="table-tbody-tr">${order.placeOrderDate}</td>
                    <td class="table-tbody-tr">${order.paymentPrice}</td>
                    <td class="table-tbody-tr">
                        <c:if test="${order.paymentMethods == 0}">
                            支付宝支付
                        </c:if>
                        <c:if test="${order.paymentMethods == 1}">
                            微信支付
                        </c:if>
                        <c:if test="${order.paymentMethods == 2}">
                            银行卡支付
                        </c:if>
                    </td>
                    <td class="table-tbody-tr">
                        <c:if test="${order.ordersStatus  == 0}">
                            待支付
                        </c:if>
                        <c:if test="${order.ordersStatus  == 4}">
                            待发货
                        </c:if>
                        <c:if test="${order.ordersStatus  == 3}">
                            已过期
                        </c:if>
                    </td>
                    <td class="operation-button table-tbody-tr">
                        <button class="view-button" order-id="${order.ordersId}">查看</button>
                    </td>
                </tr>
            </c:forEach>
            </tbody>
        </table>
    </div>
    <div class="pagination-function">
        <div class="pagination">
            <div class="pagination">

                <%-- 计算前后页码 --%>
                <%-- 如果当前页码不是第一页，则显示“首页”和“上一页”按钮 --%>
                <c:if test="${currentPage > 1}">
                    <a class="page-button"
                       href="${pageContext.request.contextPath}/background/home?menuId=108&pageNo=1">首页</a>
                    <a class="page-button"
                       href="${pageContext.request.contextPath}/background/home?menuId=108&pageNo=${currentPage - 1}">上一页</a>
                </c:if>

                <%-- 显示当前页码和总页数 --%>
                <span class="page-info">第 ${currentPage} 页 / 共 ${totalPages} 页</span>

                <%-- 如果总页数大于 7 --%>
                <c:if test="${totalPages > 7}">
                    <%-- 如果当前页码小于等于 4，则显示前 5 个页码按钮 --%>
                    <c:if test="${currentPage <= 4}">
                        <c:forEach var="i" begin="1" end="5">
                            <c:if test="${i <= totalPages}">
                                <a class="page-button"
                                   href="${pageContext.request.contextPath}/background/home?menuId=108&pageNo=${i}">${i}</a>
                            </c:if>
                        </c:forEach>
                        <%-- 显示省略号 --%>
                        <span class="page-ellipsis">...</span>
                    </c:if>

                    <%-- 如果当前页码大于总页数减 4，则显示后 5 个页码按钮 --%>
                    <c:if test="${currentPage > totalPages - 4}">
                        <%-- 显示省略号 --%>
                        <span class="page-ellipsis">...</span>
                        <c:forEach var="i" begin="${totalPages - 4}" end="${totalPages}">
                            <c:if test="${i <= totalPages}">
                                <a class="page-button"
                                   href="${pageContext.request.contextPath}/background/home?menuId=108&pageNo=${i}">${i}</a>
                            </c:if>
                        </c:forEach>
                    </c:if>

                    <%-- 如果当前页码在中间位置，则显示当前页码前后各 2 个页码按钮 --%>
                    <c:if test="${currentPage > 4 && currentPage <= totalPages - 4}">
                        <%-- 显示省略号 --%>
                        <span class="page-ellipsis">...</span>
                        <c:forEach var="i" begin="${currentPage - 2}" end="${currentPage + 2}">
                            <c:if test="${i <= totalPages}">
                                <a class="page-button"
                                   href="${pageContext.request.contextPath}/background/home?menuId=108&pageNo=${i}">${i}</a>
                            </c:if>
                        </c:forEach>
                        <span class="page-ellipsis">...</span>
                    </c:if>
                    <%-- 显示省略号 --%>
                </c:if>

                <%-- 如果总页数小于等于 7 --%>
                <c:if test="${totalPages <= 7}">
                    <c:forEach var="i" begin="1" end="${totalPages}">
                        <a class="page-button"
                           href="${pageContext.request.contextPath}/background/home?menuId=108&pageNo=${i}">${i}</a>
                    </c:forEach>
                </c:if>

                <c:if test="${currentPage < totalPages}">
                    <a class="page-button"
                       href="${pageContext.request.contextPath}/background/home?menuId=108&pageNo=${currentPage + 1}">下一页</a>
                    <a class="page-button"
                       href="${pageContext.request.contextPath}/background/home?menuId=108&pageNo=${totalPages}">尾页</a>
                </c:if>
                <%-- 如果当前页码不是最后一页，则显示“下一页”和“尾页”按钮 --%>
            </div>
        </div>
    </div>
    <!-- 弹窗 -->
    <div class="window" style="display: none ">
        <div class="pop-up-shade-layer"></div>
        <div class="pop-ups">
            <div class="pop-ups-title">
                <span>物流详情</span>
                <img src="http://localhost:8083/resource_packs/images/pop_ups_closes.png"
                     alt="弹窗关闭" class="pop-ups-down">
            </div>
            <div class="pop-ups-context">
                <div class="recipient-information">
                    <div class="addressee-information">
                        <span>运单号 :</span>
                        <a class="tracking-number"></a>
                    </div>
                    <div class="addressee-information">
                        <span class="addressee-information">收件人 :</span>
                        <a class="addressee"></a>
                    </div>
                    <div class="addressee-information">
                        <span class="addressee-information">收货地址 :</span>
                        <a class="delivery-address"></a>
                    </div>
                    <div class="addressee-information">
                        <span class="addressee-information">手机号 :</span>
                        <a class="mobile-phone-number"></a>
                    </div>
                </div>
                <div class="purchased-goods">
                    <div class="table">
                        <div class="table-row table-header">
                            <div class="table-cell">编号</div>
                            <div class="table-cell">商品名称</div>
                            <div class="table-cell">单价</div>
                            <div class="table-cell">数量</div>
                        </div>
                        <div class="table-body goods-tbody orders-table-body" style="height: 170px;">

                        </div>
                    </div>
                </div>
                <div class="merchandise-settlement">
                    <div class="settlement">
                        <div class="other-settlement">
                            <div class="order-date">
                                <a>下单时间 : </a>
                                <span class="place-order-date"></span>
                            </div>
                            <div class="order-date">
                                <a>预计到达时间 :</a>
                                <span class="estimated-time-arrival"></span>
                            </div>
                            <div class="coupon">
                                <div class="use-coupon">
                                    <a>使用优惠卷 :</a>
                                    <a class="use-coupon-name"></a>
                                    <span class="use-coupon-discount"></span>
                                </div>
                                <div>
                                    <a>优惠卷抵扣 : </a>
                                    <span class="coupon-credit"></span>
                                </div>
                            </div>
                            <div>
                                <a>总件数 : </a>
                                <span class="total-number"></span>
                            </div>
                            <div>
                                <a>总价格 : </a>
                                <span class="total-price"></span>
                            </div>
                            <div>
                                <a>运费 : </a>
                                <span class="freight"></span>
                            </div>
                            <div class="other-order">
                                <a>订单状态 :</a>
                                <span class="order-status"></span>
                            </div>
                            <div class="other-order">
                                <a>支付方式 :</a>
                                <span class="payment-methods"></span>
                            </div>
                        </div>
                        <div class="separate">

                        </div>
                        <jsp:useBean id="logisticsCompanieList" scope="request" type="java.util.List"/>
                        <div class="shipments-from">
                            <div>
                                <label for="shipping-method">运输方式 :</label>
                                <select name="choose-shipping-method" id="shipping-method">
                                    <option value="0">公路运输</option>
                                    <option value="1">航空运输</option>
                                    <option value="2">铁路运输</option>
                                </select>
                            </div>
                            <div>
                                <label for="logistics-companies">物流公司 :</label>
                                <select name="choose-logistics-companies" id="logistics-companies"
                                        class="logistics-companies">
                                    <c:forEach var="logisticsCompanie" items="${logisticsCompanieList}">
                                        <option value="${logisticsCompanie.logisticsCompaniesId}"
                                                class="selected-logistics-companies">
                                                ${logisticsCompanie.logisticsCompaniesName}
                                        </option>
                                    </c:forEach>
                                </select>
                            </div>
                            <div>
                                <label for="logistics-station">物流站 :</label>
                                <select name="choose-logistics-companies" id="logistics-station">
                                </select>
                            </div>
                            <div>
                                <label for="warehouse">货源 :</label>
                                <select name="choose-warehouse" id="warehouse">
                                </select>
                            </div>
                            <div class="window-button" style="width: 100%;margin-top: 25%;">
                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>


    <div class="window" style="display: none ">
        <div class="pop-up-shade-layer"></div>
        <div class="pop-ups" style="width: 700px;left: 28%">
            <div class="pop-ups-title">
                <span>物流公司管理</span>
                <img src="http://localhost:8083/resource_packs/images/pop_ups_closes.png"
                     alt="弹窗关闭" class="pop-ups-down">
            </div>
            <div class="pop-ups-context">
                <div class="purchased-goods">
                    <div class="table">
                        <div class="table-row table-header">
                            <div class="table-cell">编号</div>
                            <div class="table-cell">物流公司</div>
                            <div class="table-cell">负责人</div>
                            <div class="table-cell">联系电话</div>
                            <div class="table-cell">联系邮箱</div>
                            <div class="table-cell">操作</div>
                        </div>
                        <div class="table-body goods-tbody logistics-companie-table-body">
                            <c:forEach var="logisticsCompanie" items="${logisticsCompanieList}" varStatus="status">
                                <div class="table-row" index="${status.index}">
                                    <div class="table-cell table-cell-id" style="width: 10px;">
                                            ${logisticsCompanie.logisticsCompaniesId}
                                    </div>
                                    <div class="table-cell data-row" style="width: 20px;"
                                         title="${logisticsCompanie.logisticsCompaniesName}">
                                            ${logisticsCompanie.logisticsCompaniesName}
                                    </div>
                                    <div class="table-cell data-row" style="width: 10px;"
                                         title="${logisticsCompanie.logisticsCompaniesHead}">
                                            ${logisticsCompanie.logisticsCompaniesHead}
                                    </div>
                                    <div class="table-cell data-row" style="width: 10px;"
                                         title="${logisticsCompanie.logisticsCompaniesPhone}">
                                            ${logisticsCompanie.logisticsCompaniesPhone}
                                    </div>
                                    <div class="table-cell data-row" style="width: 10px;"
                                         title="${logisticsCompanie.logisticsCompaniesMailbox}">
                                            ${logisticsCompanie.logisticsCompaniesMailbox}
                                    </div>
                                    <div class="table-cell operation" style="width: 10px;">
                                        <button class="update">修改</button>
                                    </div>
                                </div>

                                <div class="table-dropdown"
                                     logistics-companies-id="${logisticsCompanie.logisticsCompaniesId}">
                                    <!-- 下拉内容 -->
                                    <table class="logistics-station-table">
                                        <thead>
                                        <tr>
                                            <th class="logistics-station-th">编号</th>
                                            <th class="logistics-station-th">物流站</th>
                                            <th class="logistics-station-th">省</th>
                                            <th class="logistics-station-th">市</th>
                                            <th class="logistics-station-th">区</th>
                                            <th class="logistics-station-th">送货人</th>
                                            <th class="logistics-station-th">联系电话</th>
                                            <th class="logistics-station-th">操作</th>
                                        </tr>
                                        </thead>
                                        <tbody class="logistics-station-tbody">
                                        </tbody>
                                    </table>
                                </div>
                            </c:forEach>
                        </div>
                    </div>
                </div>
                <div class="save-from">
                    <div class="save-from-logistics-companies">
                        <span>新增物流公司</span>
                        <div class="save-from">
                            <label>
                                <input placeholder="请输入物流公司名称" value=""
                                       class="save-logistaics-companies-input save-logistics-input"/>
                            </label>
                            <label>
                                <input placeholder="请输入负责人名称" value=""
                                       class="save-logistaics-companies-input save-logistics-input"/>
                            </label>
                            <label>
                                <input placeholder="请输入联系电话" value=""
                                       class="save-logistaics-companies-input save-logistics-input"/>
                            </label>
                            <label>
                                <input placeholder="请输入联系邮箱" value=""
                                       class="save-logistaics-companies-input save-logistics-input"/>
                            </label>
                            <button class="save-button">新增</button>
                        </div>
                    </div>
                    <div class="save-dividers">
                    </div>
                    <div class="save-from-logistics-station" style="width: 45%;margin-left: 10px">
                        <span>新增物流站</span><br>
                        <label for="affiliated-logistics-company" class="choose-affiliated-logistics-company-title">
                            所属物流公司 :
                        </label>
                        <select name="choose-affiliated-logistics-company" id="affiliated-logistics-company">
                            <c:forEach var="logisticsCompanie" items="${logisticsCompanieList}">
                                <option value="${logisticsCompanie.logisticsCompaniesId}">
                                        ${logisticsCompanie.logisticsCompaniesName}
                                </option>
                            </c:forEach>
                        </select>
                        <div class="save-from save-from-logistics-station-information">
                            <label>
                                <input placeholder="请输入物流站名称" value=""
                                       class="save-logistaics-statuion-input save-logistics-input"/>
                            </label>
                            <label>
                                <input placeholder="请输入物流站负责人" value=""
                                       class="save-logistaics-statuion-input save-logistics-input"/>
                            </label>
                            <label>
                                <input placeholder="请输入物流站联系电话" value=""
                                       class="save-logistaics-statuion-input save-logistics-input"/>
                            </label><br>
                            <button class="save-button-logistics-station">新增</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
</html>
